<template>
    <div>
        <div class="user-list unified-bg-white unifined-border-radius">
            <div class="box-head flex unified-flex-space-between ">

                <span class="box-head-title">Template List</span>

                <div class="user-list-head-search-box flex ">
                    <div class="user-list-head-search">
                        <input type="" name="" id="" value="" class="user-list-head-search-input" />
                        <span class="user-list-head-search-btn el-icon-search"></span>
                    </div>

                    <!-- 添加按钮 -->
                    <span class="user-list-head-action-btn el-icon-circle-plus-outline" @click="add"></span>
                    <!-- 全选/反选 -->
                    <el-dropdown>
                        <span class="user-list-head-action-btn el-icon-more"></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>全选</el-dropdown-item>
                            <el-dropdown-item>反选</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>

            <div class="unified-table-padding">
                <!-- 列表信息 -->
                <div class="list"  v-loading="pageLoading">

                    <div class="list-item" v-for="(item,index) in list" :key="index">


                        <di class="item-header flex ">
                            <span class="title">运费模板文本</span>


                            <div class="option">
                                <el-button type="text">设为默认</el-button>
                                <el-button type="text">编辑模板</el-button>
                                <el-button type="text">删除模板</el-button>

                            </div>

                        </di>
                        <div class="item-table">
                            <el-table :data="tableData" style="width: 100%">
                                <el-table-column prop="date" label="运送方式" width="180">
                                </el-table-column>
                                <el-table-column prop="name" label="运送到" width="180">
                                </el-table-column>
                                <el-table-column prop="address" label="首件(个)">
                                </el-table-column>
                                <el-table-column prop="address" label="运费(元)">
                                </el-table-column>
                                <el-table-column prop="address" label="续件(个)">
                                </el-table-column>
                                <el-table-column prop="address" label="运费(元)">
                                </el-table-column>
                            </el-table>

                        </div>
                    </div>
                        

                </div>
                <!-- 商品列表 -->
                <div class="unified-pagination unified-bg-white">
                    <el-pagination :page-sizes="[10]" :page-size="10" :current-page="page"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>



    </div>
</template>

<script>
    import Mixin from '../../mixin/list.js'
    export default {
        mixins: [Mixin],
        data() {

            return {
                api: this.$api.transport,
                list: []
            }

        },
        created() {
            this.$axios({
                url: this.api,
                method: "GET",
                params: {
                    action: "list",
                    params: {}
                }
            }).then(res => {

                console.log(res.data);

                if (res.data.code == 0) {
                    this.list = res.data.data
                    this.setPageLoading(false)
                } else {
                    this.$message.error(res.data.msg)
                }

            })
        },methods:{
            
            add(){
                
                this.$router.push({
                    path: '/Home/add/formwork',
                })
                
            }
            
            
        }

    }
</script>

<style>
    .page {

        flex-direction: column;

    }

    .header {
        height: 90px;
        background-color: #fff;
        padding: 0px 15px;
    }

    .list {
        flex: 1;
        background-color: #fff;
        padding: 15px 0px ;
        box-sizing: border-box;
        padding-bottom: 0px;
    }

    .list-item {
        width: 100%;
        background-color: #c3c3c344;
        margin-bottom: 15px;
        border-radius: 10px;
        padding: 1px 1px 0px 1px;
        overflow: hidden;
    }
    .list-item:last-child{
        margin-bottom: 0px;
    }

    .item-header {
        padding: 0px 14px;
        align-items: center;
        justify-content: space-between;
        height: 45px;
        background-color: #fff;
    }

    .item-table {
        padding: 3px;
        box-sizing: border-box;
        /* border: 1px solid #c3c3c3; */
    }
</style>
